<script setup>
  import { ref, onMounted } from "vue";
  import { useStore } from '@/store/index.js';
  import { useStyleStore } from "@/store/styleStore.js";
  import { Setting, User } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  import router from "@/router/index.js";
  import authorizationApi from "@/api/authorization/authorization.js";
  import StringUtil from "../../utils/StringUtil.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";
  import ResponseUtil from "@/utils/ResponseUtil.js";

  const store = useStore();
  const styleStore = useStyleStore();

  onMounted(() => {
    // 从本地缓存中将用户信息设置到 pinia 缓存中
    if (LocalStoreUtil.isLogin()) {
      store.user.info = LocalStoreUtil.getUserInfo();
    }
  })

  const info = () => {
    // 根据本地缓存判断用户是否登录
    if (!LocalStoreUtil.isLogin()) {
      // 跳转到登录页
      router.replace('/login');

      // 重置页面状态
      styleStore.comment.method.initAllStatus();
      return;
    }

    // 用户详情组件置顶
    styleStore.userInfo.method.displayTop(); // 置顶显示

    // 重新获取用户信息更新缓存
    authorizationApi.getUserInfoByCurrentLogin().then(response => {
      ResponseUtil.data(response).dispose(response => {
        if (response.code === '200') {
          // 每次查询用户信息时重新获取用户信息，并更新本地缓存
          LocalStoreUtil.setUserInfo(response.data)
          store.user.info = response.data;
          return;
        }
        // 获取用户信息失败时清除本地缓存，并跳转到登录页
        LocalStoreUtil.clearToken()
        LocalStoreUtil.clearUserInfo();
        LocalStoreUtil.clearCollectList();
        styleStore.comment.method.initAllStatus();
        router.replace("/login");
      })

    })

  }

  let tempTimeout = null;

  const come = () => {
    styleStore.setting.userHover = true;
    if (tempTimeout) {
      clearTimeout(tempTimeout);
    }
  }

  const leave = () => {
    if (!LocalStoreUtil.isLogin()) {
      styleStore.setting.userHover = false;
      return;
    }
    if (tempTimeout) {
      clearTimeout(tempTimeout);
    }
    tempTimeout = setTimeout(() => {
      styleStore.setting.userHover = false;
    }, 600);
  }

  // 退出登录
  const logout = () => {
    authorizationApi.logout().then(response => {
      LocalStoreUtil.clearToken()
      LocalStoreUtil.clearUserInfo();
      LocalStoreUtil.clearCollectList();
      store.collection.collectionList = [];
      store.collection.method.loadCollectionList();
      styleStore.comment.method.initAllStatus();
      ElMessage.success('已退出当前登录账号！');
    });
  }

  const toSettingPage = () => {
    router.replace("/setting");
  }


</script>
<template>
  <!-- 设置组件最外层盒子 -->
  <div class="setting-basic" v-show="!styleStore.content.trigger">

    <!-- 用户设置与系统设置图标外层盒子 -->
    <div class="setting-icon-basic">

      <!-- 用户设置图标 -->
      <div
          :class="['setting-icon-dev-basic', 'setting-user-icon-basic', styleStore.setting.userHover ? 'setting-user-icon-basic-hover':'']"
           @mouseenter.stop="come()"
           @mouseleave.stop="leave()"
           @click="info()" title="用户中心">
        <el-icon>
          <User/>
        </el-icon>
      </div>

      <!-- 系统设置图标 -->
      <div class="setting-icon-dev-basic setting-system-icon-basic" title="设置" @click="toSettingPage">
        <el-icon>
          <Setting/>
        </el-icon>
      </div>

    </div>

    <!-- 用户未登录提醒弹窗 -->
    <div
        :class="['setting-user-not-login-alert', styleStore.setting.userHover && !LocalStoreUtil.isLogin() ? 'setting-user-not-login-alert-show-hover':'setting-user-not-login-alert-hide-hover']">
      <div class="setting-user-not-login-alert-title">您尚未登录</div>
      <div class="setting-user-not-login-alert-text">登录后可享受更多功能，可以同步您的个性化设置到云端中。</div>
    </div>

    <!-- 登录后的用户选择菜单 -->
    <div :class="['setting-user-menu', styleStore.setting.userHover && LocalStoreUtil.isLogin() ? 'setting-user-menu-true':'setting-user-menu-false']"
    @mouseover="come" @mouseleave="styleStore.setting.userHover = false">
      <div class="setting-user-menu-item" @click="info()">
        <div class="nickname">{{ StringUtil.limit(store.user.info.nickName, 5) }}</div>
        <div class="title">账号管理</div>
      </div>
      <div class="setting-user-menu-item" @click="logout">退出登录</div>
    </div>
  </div>
</template>
<style scoped>

/* 设置组件最外层盒子基础样式 */
.setting-basic {
  width: 100px;
  /* background-color: aqua; */
  position: absolute;
  right: 60px;
  top: 30px;
}


/* 设置图标外层盒子基础样式 */
.setting-icon-basic {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
}

/* 用户设置与系统设置图标盒子基础样式 */
.setting-icon-dev-basic {
  width: 38px;
  height: 38px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all .3s;
}

/* 用户设置图标基础样式 */
.setting-user-icon-basic {
}

/* 系统设置图标基础样式 */
.setting-system-icon-basic {
}

/* 用户设置图标悬浮样式 */
.setting-user-icon-basic-hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 1);
  color: black;
}

/* 系统设置图标悬浮样式 */
.setting-system-icon-basic:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 1);
  color: black;
  transform: rotate(-90deg);
}

.setting-user-menu {
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  right: 60px;
  top: 45px;
  padding: 6px;
  background-color: rgb(238, 238, 238);
  transition: opacity .4s;
}
.setting-user-menu-item {
  width: 130px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  transition: background-color .3s;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 5px;
  text-indent: 5px;
}
.setting-user-menu-item:last-of-type {
  margin: 0;
}
.setting-user-menu-item:hover {

  background-color: rgba(0, 0, 0, .1);
}
.setting-user-menu-item .nickname {
  font-size: 16px;
  margin-bottom: 2px;
}

.setting-user-menu-true {
  animation-name: settingUserMenuTrueAnimation;
  animation-duration: 0.5s;
  display: block;
}
.setting-user-menu-false {
  animation-name: settingUserMenuFalseAnimation;
  animation-duration: 0.5s;
  display: none;
}
@keyframes settingUserMenuFalseAnimation {
  0% {
    display: block;
    opacity: 1;
    transform: translateX(0px) translateX(0px) scale(1);
  }
  100% {
    display: none;
    opacity: 0;
    transform: translateX(40px) translateY(-30px) scale(0.3);
  }
}
@keyframes settingUserMenuTrueAnimation {

  0% {
    display: none;
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    display: block;
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
}



/* 用用户未登录提醒弹窗基础样式 */
.setting-user-not-login-alert {
  width: 260px;
  padding: 8px;
  background-color: white;
  position: absolute;
  top: 42px;
  left: -255px;
  text-align: right;
  border-radius: 8px;
}

/* 用用户未登录提醒弹窗标题样式 */
.setting-user-not-login-alert-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 2px;
  margin-right: 8px;
}

/* 用户未登录提醒弹窗文字样式 */
.setting-user-not-login-alert-text {
  text-align: left;
  font-size: 14px;
}


/* 用户未登录弹窗悬浮显示与隐藏动态样式 */
.setting-user-not-login-alert-show-hover {
  animation-name: userNotLoginAlertShowAnimation;
  animation-duration: 0.5s;
  display: block;
}

.setting-user-not-login-alert-hide-hover {
  animation-name: userLoginAlertHideAnimation;
  animation-duration: 0.5s;
  display: none;
}


@keyframes userNotLoginAlertShowAnimation {
  0% {
    display: none;
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    display: block;
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes userLoginAlertHideAnimation {
  0% {
    display: block;
    opacity: 1;
    transform: translateX(0px) translateX(0px) scale(1);
  }
  100% {
    display: none;
    opacity: 0;
    transform: translateX(100px) translateY(-30px) scale(0.3);
  }
}


/* 弹出层组件内部样式 */
.user-alert-content {
  width: 300px;
  height: 100px;
  background-color: aqua;
}


</style>